<template>
  <div style="height: 100%;border-radius: 10px;">
    <div style="height: 10%;padding: 15px;display: flex;justify-content: space-between">
      <div>
        <el-input v-model="data.inpVal1" style="width: 200px;" placeholder="请输入权限名称"></el-input>
        <el-button type="primary" @click="load" style="margin-left: 10px">搜索</el-button>
        <el-button plain type="warning" @click="reset" style="margin-left: 10px">重置</el-button>
      </div>
      <div style="display: flex">

        <el-button type="success" @click="addInfo">新增</el-button>
      </div>
    </div>
    <div>
      <el-table
          v-loading="data.loading"
          height="440"
          :data="data.tableData"
          :default-sort="{ prop: 'id', order: 'descending' }"
          border
          style="width: 100%;"
      >
        <el-table-column prop="name" label="名称" width="120" align="center" />
        <el-table-column prop="icon" label="图标" align="center" />
        <el-table-column prop="pno" label="父级编号" width="120" align="center" />
        <el-table-column prop="isOne" label="是否一级菜单" width="120" align="center" />
        <el-table-column prop="visitPath" label="访问路径" align="center" />
        <el-table-column prop="path" label="文件路径" show-overflow-tooltip width="150" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" :icon="Edit" size="small" @click="updateInfo(scope.row)" />
            <el-button type="danger" :icon="Delete" size="small" @click="del(scope.row.id)"  />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--弹窗-->
    <el-dialog
        title="数据更新"
        v-model="data.dialog"
        width="35%"
        style="padding: 30px"
        :close-on-click-modal="false">
      <el-form ref="permFormRef" :rules="data.rules" :model="data.permFrom" label-width="125px">
        <el-form-item prop="name" label="名称：">
          <el-input v-model="data.permFrom.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item prop="icon" label="图标：">
          <el-select
              v-model="data.iconVal"
              placeholder="请选择图标"
          >
            <el-option
                v-for="(item,index) in data.iconOptions"
                :key="index"
                :label="item.value"
                :value="item.value"
                style="height: 80%;text-align: center"
            >
              <img width="50" height="50" :src="require('@/assets/imgs/menuIcon/' + item.value)" alt="">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isOne" label="是否为一级菜单：">
          <el-select v-model="data.isOne" placeholder="是否为一级菜单" style="width: 240px">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.isOne === '0'" prop="pno" label="父级编号：">
          <el-select
              v-model="data.pNo"
              placeholder="请选择编号"
          >
            <el-option
                v-for="(item,index) in data.pNoOptions"
                :key="index"
                :label="item.path"
                :value="item.path"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="visitPath" label="访问路径：">
          <el-input v-model="data.permFrom.visitPath" placeholder="请输入访问路径（英文、加/）"></el-input>
        </el-form-item>
        <el-form-item prop="path" label="文件路径：">
          <el-input v-model="data.permFrom.path" placeholder="(英文、二级菜单父级编号+/+访问路径首字母大写)"></el-input>
        </el-form-item>
        <div style="display: flex;justify-content: end">
          <el-button type="success" @click="addAndUpdate">提交</el-button>
          <el-button plain type="primary" @click="data.dialog = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 分页器 -->
    <div style="width: 200px;margin: 10px -100px;position: relative;left: 50%;">
      <!--
          1.@size-change  赋值每页数据数量
          2.@current-change  赋值页码
          3.pageNum 当前页码
          4.pageSize 每页数量
      -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[8, 10, 1000]"
          :page-size="data.pageSize"
          background
          layout="prev, pager, next, sizes, total"
          :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="js" setup>
import {ref, reactive, getCurrentInstance} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit, Star, UserFilled} from "@element-plus/icons-vue";

const {proxy} = getCurrentInstance();
const data = reactive({
  user: JSON.parse(sessionStorage.getItem('user-data')),
  loading: true,
  inpVal1: '',
  pageNum: 1, // 当前页码
  pageSize: 8, // 每页数量
  total: 0,
  tableData: [],
  isNull: true,
  dialog: false, // 弹窗
  permFrom: {}, // 弹窗表单
  iconVal: '', // 图标值
  isOne: '', // 是否一级菜单
  pNo: '', // 父级编号
  pNoOptions: [], // 父级菜单
  iconOptions: [
    {value: 'homeIcon.png'},
    {value: 'personIcon.png'},
    {value: 'manageIcon.png'},
    {value: 'permMenuIcon.png'},
    {value: 'allotIcon.png'},
    {value: 'systemIcon.png'},
    {value: 'userIcon.png'},
    {value: 'noticeIcon.png'},
    {value: 'logIcon.png'},
  ], // 图标数据
  rules: {
    name: [
      { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    icon: [
      { required: true, message: '请选择图标', trigger: 'blur' },
    ],
    isOne: [
      { required: true, message: '请选择是否为一级菜单', trigger: 'blur' },
    ],
    visitPath: [
      { required: true, message: '请输入访问路径，以/开头', trigger: 'blur' },
    ],
    path: [
      { required: true, message: '请输入文件路径', trigger: 'blur' },
    ],
  }
});

/**
 * 获取父级菜单
 */
const FMenu = () => {
  proxy.$request.get('/perm/isFMenu').then(res => {
    if (res.code === '200') {
      data.pNoOptions = res.data;
    } else {
      ElMessage({type:'error',message:res.msg});
    }
  });
};
FMenu();



/**
 * 重置
 */
const reset = () =>{
  data.inpVal1 = '';
  load();
};

/**
 * 新增修改
 */
const addInfo = () => {
  data.permFrom = {};
  data.iconVal = '';
  data.dialog = true;
};
const updateInfo = (row) => {
  data.permFrom = JSON.parse(JSON.stringify(row));
  data.iconVal = row.icon;
  data.dialog = true;
};
const addAndUpdate = () => {
  proxy.$refs['permFormRef'].validate(valid => {
    if (valid) {
      data.permFrom.isOne = data.isOne;
      data.permFrom.icon = data.iconVal;
      data.permFrom.pno = data.pNo;
      proxy.$request({
        url: data.permFrom.id ? '/perm/update' : '/perm/add',
        method: data.permFrom.id ? 'PUT' : 'POST',
        data: data.permFrom
      }).then(res => {
        if (res.code === '200') {
          data.dialog = false;
          ElMessage({message: '数据更新成功！', type: 'success'});
          load();
        } else {
          ElMessage({message:res.msg,type:'error'});
        }
      });
    }
  });
};

/**
 * 删除
 */
const del = (id) => {
  proxy.$confirm('确定删除该条数据？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'danger'
  }).then(() => {
    proxy.$request.delete('/perm/del/' + id).then(res => {
      if (res.code === '200') {
        ElMessage({message: '删除成功！', type: 'success'});
        load();
      } else {
        ElMessage({message: res.msg, type: 'error'});
      }
    });
  }).catch(() => {});
};

/**
 * 页面加载
 */
const load = ()=>{
  proxy.$request.get('/perm/findByPage',{
    params:{
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      name: data.inpVal1,
    }
  }).then(res => {
    if (res.data != null) {
      data.tableData = res.data.tlist
      data.total = res.data.total;
    } else {
      ElMessage({message:res.msg,type:'error'});
    }
    data.loading = false;
  });
}
// 调用函数
load();
/**
 * 赋值分页器
 */
const handleSizeChange = (pageSize) => {
  data.pageSize = pageSize;
  load();
};
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum;
  load();
};
</script>
<style scoped>

</style>